import { connect } from 'react-redux'
import React, { useCallback, useMemo } from 'react'
import { SimpleSelector } from './simpleSelector'
import { getCommonAllEnvsSelector } from '../../selectors/baseSelector'

const maStateToProps = state => {
    return {
        allEnvs: getCommonAllEnvsSelector(state),
    }
}

const mapDispatchToProps = dispatch => {
    return {
    }
}

export const EnvSelector = connect(maStateToProps, mapDispatchToProps)((props) => {
    const { showNoLimitItem, envName, onSelectItem, readOnly, allEnvs, placeholder = '运行环境' } = props
    const filterDataSource = useCallback(value => item => item.name.includes(value), [])

    const getItemValue = useCallback(item => item.name, [])
    const renderItem = useCallback(item => item.title, [])

    const dataSource = useMemo(() => {
        return (showNoLimitItem ? [{ name: '', title: '[不限测试环境]' }] : []).concat(allEnvs.map(item => ({ name: item.name, title: item.name, host: item.host })))
    }, [allEnvs])

    return <SimpleSelector dataSource={dataSource} filterDataSource={filterDataSource}
        getItemValue={getItemValue} initValue={envName} onSelectItem={onSelectItem}
        readOnly={readOnly} renderItem={renderItem} placeholder={placeholder}
        inputClassName='width_100px' />
})